<section id="floor-plan">
	<div class="rs-cf-item floor-plan" >
		<!-- upload -->
		<i class="js-trigger-upload"></i>
		<div class="floor-plan-head clearfix">
			<div class="select-ul build-h mr-24">
				<span class="select-name br-4" style="background:rgba(249,249,249,1);border: 0;" ref="buildName">请选择楼栋</span>
				<ul>
					<li v-for="(item, index) in floorData" @click="getBuild(item.buildingId)">{{item.names}}</li>
				</ul>
			</div>
			<div class="select-ul floor-h">
				<span class="select-name br-4" style="background:rgba(249,249,249,1);border: 0;" ref="floorName">请选择楼层</span>
				<ul>
					<li :id="item.floorId" v-for="(item, index) in buildData" @click="getUnit(item.floorId, item.plainGraph, item.configState, index)">{{item.floorName}}</li>
				</ul>
			</div>
		</div>
		<div class="floor-plan-title mb-10 clearfix">
			<h3 class="pull-left">楼层平面图</h3>
			<div class="pull-right">
				<button class="btn n-btn-primary delposxy" v-if="imageUrl" @click="delPos">删除定位</button>
			</div>
		</div>
		<div class="floor-plan-indicator mb-10 clearfix" v-if="imageUrl">
			<button type="button" class="indicator-btn" @click="increaseFloorPlan">
				<span class="icon-GM-amplification icon"></span>放大
			</button>
			<button type="button" class="indicator-btn mr-10" @click="decreaseFloorPlan">
				<span class="icon-GM-shrink icon"></span>缩小
			</button>
		</div>
		<div class="floor-drap">
			<div id="container" v-if="imageUrl">
				<div id="outer-dropzone" class="dropzone">
					<img class="floor-image" :src="imageUrl">

					<div class="draggable drag-drop drag-drop-1" :data-width="item.width" :data-height="item.height" :data-x="item.paddingLeft"
					 :data-y="item.paddingTop" v-for="(item, index) in unitData.units" v-if="item.locateType == 'Y'" :data-i="index"
					 :data-id="item.unitId" :style="{transform: 'translate('+item.paddingLeft+'px, '+item.paddingTop+'px)', height: item.height + 'px', width: item.width +'px', 'background-color': 'rgba(239,106,122,0.9)' } "
					 @click="delIndexp(item.unitId, index, $event)">
						{{item.unitName}}
					</div>
				</div>
			</div>

			<div class="pos-button" v-if="!imageUrl">
				<b>暂无平面图，请上传平面图</b>
			</div>
		</div>

		<div class="floor-dy" v-if="unitData.units.length">
			<h4>楼层单元</h4>

			<div class="color-666">未定位单元（{{locateTypeN}}/{{unitData.units.length}}）</div>
			<div class="clearfix">
				<ul class="floor-n gray">
					<li v-for="(item, index) in unitData.units" v-if="item.locateType == 'N'" @click="changeGreen(index)">
						<span>{{item.unitName}}</span>
						<span>{{item.acreage}}m²</span>
						<p>{{item.unitType | unitType}}</p>
					</li>
				</ul>
			</div>
			<div class="color-666 mt-15">已定位单元（{{locateTypeY}}/{{unitData.units.length}}）</div>
			<div class="clearfix">
				<ul class="floor-n green">
					<li v-for="(item, index) in unitData.units" v-if="item.locateType == 'Y'">
						<span>{{item.unitName}}</span>
						<span>{{item.acreage}}m²</span>
						<p>{{item.unitType | unitType}}</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="save mt-15">
			<button class="btn n-btn-primary" v-if="unitData.units.length" @click="saveFloor">保存当前楼层配置</button>
		</div>
	</div>
</section>

<script src="modules/projectConfig/scripts/planGraph.js" charset="utf-8"></script>
